<template>
  <div class="login-wrapper">
    <div class="login-box">
      <div class="login-title">曲稻劳务派遣系统</div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="mobile"
            name="mobile"
            label="手机号码"
            placeholder="手机号码"
            :rules="[{ required: true, message: '请填写手机号码' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: false, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 30px 16px 16px 16px">
          <van-button block type="primary" class="submit-button" native-type="submit"> 登录 </van-button>
        </div>
      </van-form>

      <!-- <div class="login-form">
        <input type="text" class="login-input" placeholder="手机号" v-model="username" />
        <input type="text" class="login-input" placeholder="密码" v-model="password" />

        <van-button type="default" @click="handleLogin">登录</van-button>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      mobile: '',
      password: '',
    };
  },
  methods: {
    onSubmit(values) {
      this.$store
        .dispatch('user/login', values)
        .then(() => {
          this.$router.push({ path: this.redirect || '/' });
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss">
.login-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  align-items: center;

  .submit-button {
    background: rgba($color: #000000, $alpha: 0.6);
    border: none;
  }

  .login-box {
    width: 92%;
    margin: 0 auto;
    position: relative;

    .login-title {
      font-size: 34px;
      text-align: center;
      font-weight: bold;
      color: #000;
      position: absolute;
      left: 50%;
      top: -25%;
      transform: translate(-50%, -50%);
    }

    .van-cell-group {
      background: transparent;
    }

    .van-form .van-cell {
      margin: 40px 0;
    }
  }
}
.login-wrapper1 {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #334154;
  .login-box {
    position: relative;
    color: #fff;
    padding-top: 200px;

    .login-title {
      font-size: 34px;
      text-align: center;
      font-weight: bold;
      margin-bottom: 60px;
    }
    .login-form {
      position: relative;
      top: 100px;
      width: 80%;
      margin: 0 auto;
      .login-input {
        color: #fff;
        width: 100%;
        font-size: 28px;
        background: none;
        height: 60px;
        border: none;
        border-bottom: 1px solid #999;
        margin-bottom: 40px;
      }
      .van-button {
        margin-top: 30%;
        width: 100%;
        font-size: 28px;
      }
    }
  }
}
</style>
